/* 页面整体布局 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
}

/* 左侧导航栏样式 */
.left {
  width: 200px;
  background-color: #f4f4f4;
  padding: 20px;
  height: 100vh;
}

.left ul {
  list-style: none;
  padding: 0;
}

.left ul li {
  padding: 10px;
  cursor: pointer;
  position: relative;
}

/* 鼠标悬停效果 */
.left ul li:hover {
  background-color: #fffae2; /* RGB(255, 250, 226) */
}

.left ul li:hover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: #fa9c0b; /* RGB(250, 156, 11) */
}

/* 右侧内容区域样式 */
.right {
  flex: 1;
  padding: 20px;
}

.right-top ul {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  padding: 0;
}

.right-top ul li {
  margin-left: 20px;
  cursor: pointer;
}

.right-title {
  font-size: 24px;
  margin: 20px 0;
}

.right-nav ul {
  list-style: none;
  display: flex;
  padding: 0;
}

.right-nav ul li {
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

/* 搜索栏样式 */
.search-bar {
  margin: 20px 0;
}

.search-bar input {
  padding: 8px;
  width: 300px;
}

.search-bar button {
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* 过滤选项样式 */
.filter-options {
  margin: 20px 0;
}

.filter-options label {
  margin-right: 15px;
}

/* 包裹列表表格样式 */
.package-list {
  margin: 20px 0;
}

.package-list table {
  width: 100%;
  border-collapse: collapse;
}

.package-list th, .package-list td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.package-list th {
  background-color: #f4f4f4;
}

/* 分页按钮样式 */
.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 20px 0;
}

.pagination button {
  padding: 8px 12px;
  margin: 0 5px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.pagination button.active {
  background-color: #0056b3;
}

.pagination span {
  margin: 0 5px;
}

/* 包裹详情页样式 */
.package-detail {
  margin: 20px 0;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section h3 {
  margin-bottom: 10px;
}

/* 返回按钮样式 */
#backButton {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Progress Line - 蓝色进度线，展示包裹进程 */
.progress-line {
  height: 4px;
  background-color: #007bff;
  margin: 20px 0;
  position: relative;
}

/* 进度线的伪元素，用于扩展点击区域 */
.progress-line::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: transparent;
}

/* Status Flow - 状态流程图容器 */
.status-flow {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

/* 状态流程图的每一步 */
.status-step {
  text-align: center;
  flex: 1;
  position: relative;
}

/* 状态步骤的圆点标记 */
.status-step::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #007bff;
  z-index: 1;
}

/* 当前步骤的圆点标记（高亮显示） */
.status-step.active::before {
  background-color: #28a745;
}

/* 状态步骤的文字描述 */
.status-step p {
  margin-top: 25px;
}